<!-- 带下拉菜单的输入菜单 -->
<!-- @change="OnChange" -->
<template>
  <div>
    <el-select
      v-model="selectedValue"
      value-key="value"
      :placeholder="text"
      style="width: 198px"
      filterable
      clearable
      @clear="handleClear"
      v-bind="$attrs"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.name"
        :value="item"
      />
    </el-select>
  </div>
</template>

<script lang="ts" setup>
import {
  ref,
  reactive,
  getCurrentInstance,
  nextTick,
  computed,
  onMounted,
  provide,
} from "vue";
import { ElMessage, ElMessageBox } from "element-plus";

const props = defineProps({
  text: {
    type: String,
    default: "请选择",
  },
  options: {
    type: Array,
    default: () => [
      {
        name: "首页Banner",
        value: "home/banner",
        desc: "首页的Banner部分展示",
      },
      {
        name: "首页封面-专题精选",
        value: "home/cover,classify",
        desc: "首页的专题精选部分展示",
      },
      // { name: "3", value: "Option C", desc: "Option C - 230506" },
      // { name: "4", value: "Option A", desc: "Option A - 230507" },
    ],
  },
  modelValue: {
    type: [String, Number],
    default: "",
  },
});

// 选中值
const selectedValue = computed({
  get() {
    //类型转换后比较）将类型转换一致后比较
    let matchedOption = props.options.find(
      (item: Option) => String(item.value) === String(props.modelValue)
    );
    return matchedOption ? matchedOption : null;
  },
  set(val) {
    emit("update:modelValue", val?.value || "");
  },
});

type Option = {
  name: string;
  value: string | number; // 确保 value 的类型与 modelValue 一致
  desc: string;
};

const options = computed(() => {
  return props.options.map((item: Option) => {
    return {
      name: item.name,
      value: item.value,
      desc: item.desc,
    };
  });
});

const emit = defineEmits(["update:modelValue"]);

const handleClear = () => {
  emit("update:modelValue", "");
};
</script>

<style lang="scss" scoped></style>
